import ReactDom from "react-dom";

import "antd/dist/antd.min.css";
import "./styles/base.css";
import "./styles/index.css";

// 目标 : 使用useState改造计数器功能
// 1 改造类组件为函数式组件
// 2 导入useState
import React, { useEffect, useState } from "react";

import "./styles/base.css";
import "./styles/index.css";
function App() {
  const [list, setList] = useState(
    JSON.parse(localStorage.getItem("todos-list")) || [
      { id: 1, task: "vue", isDone: true },
      { id: 2, task: "react", isDone: false },
    ]
  );

  const [type, setType] = useState(
    JSON.parse(localStorage.getItem("todos-type")) || "all"
  ); // all  completed  active

  //   小选按钮选中样式
  const handleChange = (id) => {
    const newList = list.map((item) => {
      return {
        ...item,
        isDone: item.id === id ? !item.isDone : item.isDone,
      };
    });
    // console.log(newList);
    setList(newList);
  };

  //   删除业务
  const handleDltList = (id) => {
    const newList = list.filter((item) => {
      return item.id !== id;
    });
    // console.log(newList);
    setList(newList);
  };

  //  新增业务
  const handleAddList = (task) => {
    const newObj = {
      id: Date.now(),
      task,
      isDone: false,
    };
    setList([...list, newObj]);
  };

  // 计算属性 : 计算切换后的list
  const showList = list.filter((item) => {
    // 如果type为active,返回item.isDone为false的
    if (type === "active") return !item.isDone;
    // 如果type为completed,返回item.isDone为true的
    if (type === "completed") return item.isDone;
    // 如果type为all，返回item
    return item;
  });

  //   钩子函数缓存数据
  useEffect(() => {
    // console.log("更新了");
    localStorage.setItem("todos-list", JSON.stringify(list));
    localStorage.setItem("todos-type", JSON.stringify(type));
  }, [list, type]);

  return (
    <section className="todoapp">
      {/* 头部 */}
      <Head handleAddList={handleAddList} />
      {/* 主体 */}
      <Main
        list={showList}
        handleChange={handleChange}
        handleDltList={handleDltList}
      />
      {/* 底部 */}
      <Footer type={type} setType={setType} />
    </section>
  );
}
function Footer({ type, setType }) {
  return (
    <footer className="footer">
      <span className="todo-count">
        <strong>1</strong> 剩余
      </span>
      <ul className="filters">
        <li>
          <a
            onClick={() => setType("all")}
            className={type === "all" ? "selected" : ""}
            href="#/"
          >
            全部
          </a>
        </li>
        <li>
          <a
            onClick={() => setType("active")}
            className={type === "active" ? "selected" : ""}
            href="#/active"
          >
            未完成
          </a>
        </li>
        <li>
          <a
            onClick={() => setType("completed")}
            className={type === "completed" ? "selected" : ""}
            href="#/completed"
          >
            已完成
          </a>
        </li>
      </ul>
      <button className="clear-completed">清除已完成</button>
    </footer>
  );
}

function Main({ list, handleChange, handleDltList }) {
  return (
    <section className="main">
      <input id="toggle-all" className="toggle-all" type="checkbox" />
      <label htmlFor="toggle-all">全选</label>
      <ul className="todo-list">
        {list.map((item) => (
          <li key={item.id} className={item.isDone ? "completed" : ""}>
            <div className="view">
              <input
                onChange={() => handleChange(item.id)}
                checked={item.isDone}
                className="toggle"
                type="checkbox"
              />
              <label>{item.task}</label>
              <button
                onClick={() => handleDltList(item.id)}
                className="destroy"
              ></button>
            </div>
          </li>
        ))}
      </ul>
    </section>
  );
}

function Head({ handleAddList }) {
  const [task, setTask] = useState("");
  const keyDown = (e) => {
    if (e.keyCode === 13) {
      //   console.log("回车");
      handleAddList(task);
    }
  };
  return (
    <header className="header">
      <h1>todos</h1>
      <input
        onKeyDown={keyDown}
        onChange={(e) => setTask(e.target.value)}
        value={task}
        className="new-todo"
        placeholder="需要做什么"
        autoFocus
      />
    </header>
  );
}

ReactDom.render(<App />, document.querySelector("#root"));
